<template>
  <div class="box" id="vm2">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-cvm-classify"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";

export default {
  data() {
    return {
      startTime: this.dateShift(0),
      endTime: this.dateShift(0),
      showLoading: false,
      chartInstance: null,
      option: null,
      params: null,
      keyModal: null,
      autoflip: false,
      ticketFn: null,
      timeLimit: this.today(),
      timeMin:this.dateShift(-365*2)
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      let $this = this;
      this.params = {
        startTime: this.startTime + " 00:00:00",
        endTime: this.endTime + " 23:59:59"
      };
      this.showLoading =true
      axios.get(this.URLHEAD + "YZT_ZQDDJGFX", { params: this.params }).then(res => {
        let data = res.data;
        this.highFrequencyPlace = data.Data.Name;
        this.momIncrease = data.Data.Tag;
        this.mainRisePlace = data.Data.Value;
        this.option = {
          tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c}起 ({d}%)" },
          grid: { top: 10, left: 10, right: 10, bottom: 10, containLabel: true },
          color: [ "#a552bd", "#653c97", "#4d3c97", "#3c4e97", "#405b9a", "#44699a", "#4b889c", "#509f9e", "#58bba1", "#52cd98", "#63e7a5" ],
          calculable: true,
          series: [
            {
              name: "产生警情",
              type: "pie",
              radius: ["55%", "85%"],
              center: ["50%", "50%"],
              roseType: "area",
              data: data.Data.list,
              itemStyle: { normal: { shadowBlur: 23, shadowOffsetX: 0, shadowOffsetY: 2, shadowColor: "rgba(0,0,0,0.2)" } },
              label: {
                normal: { show: true, formatter: "{main|{b}}：\n{num|{c}}{sub|起}", position: "right", rich: { main: { fontSize: 12 }, num: { fontSize: 28 }, sub:{ fontSize:12 } } }
              },
              labelLine: { length: 5, length2: 5 }
            }
          ]
        };
        this.chartInstance = this.$Crender("chart-cvm-classify", this.option);
        this.showLoading = false;
        
      });
    }
  }
};
</script>
<style scoped>
</style>
